<template>
  <view class="content">
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>
	<div class="inquiryList-page">
		   <!-- <f-navbar  fontColor="#303133"  bgColor="#fff" navbarType="9" :isChoose="2"></f-navbar> -->
			<u-sticky bgColor="#fff">
			    <u-tabs :list="tabs" lineColor="#FF5E01" :activeStyle="{color: '#FF5E01'}" :current="current" @change="changeTab" :scrollable="false"></u-tabs>
			  </u-sticky>
			
			<div class="con-list-div" style="padding:32rpx">
				 <div class="coupon-item" v-for="(item,index) in list" :class="{'gary':item.couponState != 0}" :key="item.id">
					<div class="coupon-label">满减券</div>
					<div class="coupon-top">
					  <div class="top-left">
						<div class="coupon-name">{{item.couponName}}</div>
						<div class="coupon-time">有效期至{{item.endTime}}</div>
					  </div>
					  <div class="top-right">
						<div class="coupon-price"><span class="span" style="padding-left:0;padding-right:10rpx">减</span>{{item.couponAmount}}<span class="span">{{item.couponUnit}}</span></div>
						<div class="right-bottom">满{{item.limitWeight}}吨可用</div>
					  </div>
					</div>
					<div class="coupon-bottom">
					  <div class="coupon-line"></div>
					  <div style="display: flex;justify-content: flex-start;align-items: center;" @click="changzk(index)" v-if="!item.isZK">
						  <div class="coupon-text" style="flex:1;">使用规则：{{item.couponWords}}</div>
					      <div style="width:50rpx;display: flex;justify-content: flex-end;">
							  <u-icon name="arrow-down"></u-icon>
						  </div>
					  </div>
					  <div style="display: flex;justify-content: flex-start;align-items: flex-end;" @click="changzk(index)" v-else>
						  <div style="flex:1;padding-top:6rpx;font-size: 24rpx;color:#888;">使用规则：{{item.couponWords}}</div>
					      <div style="width:50rpx;display: flex;justify-content: flex-end;">
							  <u-icon name="arrow-up"></u-icon>
						  </div>
					  </div>
					</div>
				  </div>
			</div>
			<div style="padding-bottom:40rpx;">
			   <u-loadmore :status="status" ></u-loadmore>
			</div>
	</div>
	
    
	<liu-drag-button :canDocking="false" :bottomPx='170' :rightPx='10'>
		 <img src="https://pic.moresu.com/FmkF0x1cT7NY-NQnY6bDqmGXJuQT" style="width:138rpx;height:138rpx" @click="tocoupon()"/>	
	</liu-drag-button>
	
  </view>
</template>

<script>

import {getMyCouponList,} from '@/config/coupon.js'
import{pageSeo}from '@/config/api.js'
import fNavbar from '@/components/module/f-navbar/f-navbar';

  import {
    mapState,
  } from 'vuex';
const log = require('@/plugins/log.js')
  export default {
    components: {
		fNavbar

    },
    data() {
      return {
        tabs:[
			{key:'0',name:'可使用'},
			{key:'1',name:'已使用'},
			{key:'2',name:'已过期'},
		],
		current:0,
		status: 'loadmore',
		list: [],
		pageNum: 0,
		pageSize:10,
		count:0,
		couponState:'0',
		isZK:false
	
      }
    },

    async onLoad(options) {
		// 隐藏原生的tabbar
		uni.hideTabBar();
    	await this.$onLaunched;	
		this.clearData();
		this.getList()
		
		
    },
	async onShow() {
		await this.$onLaunched;
		// #ifdef H5
		pageSeo({pageType: 'indexPage'}).then((res)=>{
			document.title = res.pageTitle;
		})
		// #endif
	},
	onReachBottom() {
		if(this.list.length >= this.count) {
			this.status = 'nomore';
			return ;
		}
		this.pageNum = ++ this.pageNum;
		this.getList()
	},
	
    methods: {
		changzk(index){
			let c = JSON.parse(JSON.stringify(this.list[index]))
			c.isZK = !c.isZK
			this.list.splice(index,1,c)
		},
		tocoupon(){
			uni.navigateTo({
				url: '/pagesCommon/couponCenter'
			})
		},
	
		changeTab(tab){
			console.log(tab)
			this.couponState = tab.key
			this.searchList()	
		},
		
		
		searchList(){
			this.clearData();
			this.getList()
		},
		
		//清除数据
		clearData(){
				this.pageNum = 1;
				this.list = [];
				this.status = 'loadmore';
				this.count = 0;
		},
		getList(){
			let data = {};
			data.pageSize = 10;
			data.pageNum = this.pageNum;
			
			data.couponState = this.couponState;
			this.status = 'loading';
		return	getMyCouponList(data).then((res)=>{
			    let list = res.list
				list.forEach((el)=>{
					el.isZK = false
				})
				this.list = this.list.concat(list ? list : [] );
				this.count = res.count;
				if(this.list.length >= this.count) {
					this.status = 'nomore';
				}else{
					this.status = 'loadmore';
				}
			}).catch(()=>{
				this.status = 'loadmore';
			})
		},
		
	}

  }
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';
.inquiryList-page{
	background: rgb(242,242,242);
	min-height: 100vh;
	.inquiryList-top{
		padding:32rpx;
		.fifter-div{
			background: #fff;
			border-radius: 18rpx;
			padding:10rpx 0;
			@include flexbox(center,center);
			font-size: $m-font;
			line-height: 48rpx;
			margin-top:20rpx;
			box-shadow: 0px 0px 10rpx rgba(0,17,52,0.09);
			.fifter-item{
				text-align: center;
				width:50%;
				position: relative;
			}
			.fifter-item:first-child{
				color:#FF5E01
			}
			.fifter-item:first-child::after{
				content: ' ';
				position: absolute;
				width:1px;
				height:40rpx;
				background: #DEDEDE;
				right:0;
				top:4rpx;
			}
		}
	}
	.con-list-div{
		margin-bottom:40rpx;
		.gary.coupon-item{
		  background: #fff;
		  color:#c2c2c2;
		  .coupon-label{
			background: #c2c2c2;
		  }
		  .coupon-top .top-right .coupon-price{
			color:#c2c2c2;
		  }
		  .coupon-top .coupon-time{
			   color:#c2c2c2;
		  }
		  .coupon-top .top-right .right-bottom{
			   color:#c2c2c2;
		  }
		  .coupon-bottom .coupon-line{
			border-top: 1px dashed #ccc;
		  }
		   .coupon-bottom .coupon-text{
			   color:#c2c2c2;
		   }
		}
		.coupon-item{
		        border-radius: 18rpx;
		        background: rgb(255,255,255);
		        width:100%;
		        position: relative;
				padding-bottom:10rpx;
				margin-bottom:30rpx;
		        .coupon-label{
		          padding:4rpx 20rpx;
		          line-height:32rpx;
		          display: flex;
				  width:fit-content;
		          background: linear-gradient(to right, rgb(255,122,1), rgb(255,41,182));
		          color:#fff;
		          font-size: 24rpx;
		          border-top-left-radius: 18rpx;
		          border-bottom-right-radius: 18rpx;
		        }
		        .coupon-top{
		          display: flex;
		          justify-content: space-between;
		          align-items: flex-start;
		          padding:24rpx;
		          .coupon-name{
		            font-size: 32rpx;
		          }
		          .coupon-time{
		            font-size: 24rpx;
		            color:#888;
		            padding-top: 10rpx;
		          }
		          .top-right{
		            text-align: center;
		            .coupon-price{
		              font-size:36rpx;
		              font-weight:bold;
		              color:#ff4600;
		              .span{
		                font-size: 24rpx;
		                font-weight: 400;
		                padding-left:10rpx;
		              }
		            }
		            .right-bottom{
		              margin-top:4rpx;
		              color:#888;
					  font-size: 24rpx;
		            }
		          }
		        }
		        .coupon-bottom{
		          padding:10rpx 24rpx;
		          .coupon-line{
		            height:10rpx;
		            border-top: 2rpx dashed #f4b4b4;
		          }
		          .coupon-text{
		            padding-top:6rpx;
		            font-size: 24rpx;
		            white-space: nowrap; /* 保证文本在一行内显示 */
		            overflow: hidden; /* 隐藏溢出的内容 */
		            text-overflow: ellipsis;
		            color:#888;
		            cursor: default;
		          }
		        }
		    }
		  
	}

}
 .fixed-btn{
	 width:134rpx;
	 height:134rpx;
	 border-radius: 50%;
	 background: #fff;
	 box-shadow: 0px 0px 10px rgba(0,17,52,0.09);
	 font-size:28rpx;
	 color:#FF5E01;
	 position: fixed;
	 right:10rpx;
	 bottom:200rpx;
	 text-align: center;
	 z-index: 4;
 }
</style>